import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Typography, Spin, Alert } from 'antd';
import { UserOutlined, ShoppingCartOutlined, DollarOutlined } from '@ant-design/icons';

const { Title } = Typography;

const MinimalDashboard = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalOrders: 0,
    totalRevenue: 0
  });

  useEffect(() => {
    console.log('MinimalDashboard mounted');
    
    // 模拟数据加载
    const loadData = async () => {
      try {
        setLoading(true);
        console.log('Loading dashboard data...');
        
        // 模拟API延迟
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        setStats({
          totalUsers: 1128,
          totalOrders: 93,
          totalRevenue: 112893.50
        });
        
        console.log('Dashboard data loaded successfully');
        setError(null);
      } catch (err) {
        console.error('Error loading dashboard data:', err);
        setError('加载数据时出错');
      } finally {
        setLoading(false);
      }
    };

    loadData();
  }, []);

  if (loading) {
    return (
      <div style={{ padding: '24px', textAlign: 'center' }}>
        <Spin size="large" />
        <p style={{ marginTop: '16px' }}>加载中...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ padding: '24px' }}>
        <Alert
          message="加载错误"
          description={error}
          type="error"
          showIcon
        />
      </div>
    );
  }

  return (
    <div style={{ padding: '24px', background: '#f0f2f5', minHeight: '100vh' }}>
      <Title level={2}>仪表盘</Title>
      
      <Row gutter={16} style={{ marginBottom: '24px' }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="总用户数"
              value={stats.totalUsers}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="总订单数"
              value={stats.totalOrders}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="总收入"
              value={stats.totalRevenue}
              prefix={<DollarOutlined />}
              precision={2}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
      </Row>
      
      <Card title="系统信息">
        <p>✅ 组件渲染正常</p>
        <p>✅ 状态管理正常</p>
        <p>✅ Ant Design组件正常</p>
        <p>当前时间: {new Date().toLocaleString()}</p>
        <p>Token: {localStorage.getItem('admin_token') ? '已设置' : '未设置'}</p>
      </Card>
    </div>
  );
};

export default MinimalDashboard;